<template>
  <view class="wrapper">
    <view class="nav" :style="{paddingTop: statusbarHeight + 'px'}">
      <view class="title">
        <view class="back" @click="back" v-if="false">
          <u-icon name="arrow-left" color="#333" size="18px"></u-icon>
        </view>
        <text class="text">财务管理</text>
      </view>
      <view class="tab">
        <u-subsection
            mode="subsection"
            bgColor="#f7f8f9"
            inactiveColor="#666666"
            activeColor="#ff0000"
            :list="tabs"
            @change="changeIndex"
            :current="current"
            fontSize="24rpx"></u-subsection>
      </view>
    </view>
    <view class="list" v-if="list.length > 0">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="time">
          <text>订单号: {{ item.sn }}</text>
          <text>{{ item.create_time }}</text>
        </view>
        <view class="product" v-for="(o, i) in item.item" :key="i">
          <template v-if="o.product">
            <view class="image">
              <u--image
                  class="img"
                  lazy-load width="160rpx"
                  height="160rpx"
                  :fade="true" duration="450"
                  :src="baseUrl + o.sku.image.thumbnail_path"
                  v-if="o.sku && o.sku.image"></u--image>
              <u--image
                  class="img"
                  lazy-load width="160rpx"
                  height="160rpx"
                  :fade="true" duration="450"
                  :src="baseUrl + o.product.mainImage.thumbnail_path"
                  v-else-if="o.product.mainImage"></u--image>
            </view>
            <view class="desc">
              <view class="title two-lines">{{ o.product.title }}</view>
              <view class="sku" v-if="o.selected_sku_text && Array.isArray(o.selected_sku_text)">
                {{ o.selected_sku_text.join(', ') }}
                x
                {{ o.quantity }}
              </view>
              <view class="price">
                价格: <text class="unit">￥</text><text>{{ o.price * 1 }}</text>
                <template v-if="o.freight > 0">
                  <text class="split"></text>
                  运费: <text class="unit">￥</text><text>{{ o.freight * 1 }}</text>
                </template>
              </view>
            </view>
          </template>
        </view>
        <view class="ops">
          <view class="amount">实付金额:<text class="unit">￥</text><text>{{ item.total_pay * 1 }}</text></view>
          <view class="btn">
            <view class="x" v-if="item.status * 1 === 0">
              <u-button class="" text="取消" size="small" @click="onCancel(item)"></u-button>
            </view>
            <view class="x" v-if="item.status * 1 === 0 && false">
              <u-button class="" text="去支付" size="small"></u-button>
            </view>
            <view class="x" v-if="item.status * 1 === 2" @click="onReceived(item)">
              <u-button class="" text="确认收货" size="small"></u-button>
            </view>
            <view class="x" v-if="item.status * 1 === 3">
              <u-button class="" text="评价" size="small" @click="onComment"></u-button>
            </view>
            <view class="x" v-if="item.status * 1 === 3">
              <u-button class="" text="申请售后" size="small" @click="onService"></u-button>
            </view>
            <view class="x" v-if="item.status * 1 === 1" @click="onUrge">
              <u-button class="" text="催发货" size="small"></u-button>
            </view>
          </view>
        </view>
        <view class="express" v-if="item.status * 1 === 2" @click="onExpress(item)">
          查看物流信息...
        </view>
      </view>
    </view>
    <view class="list nothing" v-else>
      暂无相关信息...
    </view>
    <!--<arrow />-->
    <u-back-top bottom="120" right="40" :scroll-top="scrollTop" icon="arrow-up" :customStyle="{'opacity': '0.99'}"></u-back-top>
  </view>
</template>

<script>
// import Arrow from '../../components/arrow'
import config from '../../config/config'
import base64 from '../../util/base64'
import Order from '../../api/order'
const orderModel = new Order()

export default {
  components: {
    // Arrow
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  data() {
    return {
      scrollTop: 0,
      baseUrl: config.baseUrl,
      tabs: ['进帐流水', '提现列表'],
      current: 0,
      list: [],
      queryList: {
        page: 0,
        pageSize: 10,
        busy: false
      },
      statusbarHeight: 0
    }
  },
  onPullDownRefresh() {
    this.queryList = {
      page: 0,
      pageSize: 10,
      busy: false
    }
    // this.getList()
  },
  onReachBottom() {
    // this.getList(true)
  },
  onLoad(options) {
    // 状态栏高度
    uni.getSystemInfo({
      success: res => {
        this.statusbarHeight = res.statusBarHeight
      }
    })
    // 测试中, Mini => 20px, Android => 32px
    // console.log(this.statusbarHeight)
    const index = +options.type || 0
    this.current = index
    // this.getList()
  },
  methods: {
    back() {
      uni.navigateBack()
    },
    changeIndex(index) {
      this.current = index
      this.queryList = {
        page: 0,
        pageSize: 10,
        busy: false
      }
      this.list = []
      // this.getList()
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        orderModel.orderList({
          ...this.queryList,
          status: this.current
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
          uni.stopPullDownRefresh();
          // console.log(this.list)
        })
      }
    },
    onComment() {
      uni.showToast({
        icon: 'none',
        title: '评价已经关闭'
      })
    },
    onService() {
      uni.showToast({
        icon: 'none',
        title: '请联系客服'
      })
    },
    onUrge() {
      uni.showToast({
        icon: 'none',
        title: '催促完成,我们正在处理!'
      })
    },
    onCancel(item) {
      orderModel.orderDelete({ order_id: item.id }).then(() => {
        this.$set(item, 'status', '-99')
        this.list = this.list.filter(x => x.id !== item.id)
        uni.showToast({
          icon: 'none',
          title: '操作成功'
        })
      })
    },
    onReceived(item) {
      orderModel.orderReceived({ order_id: item.id }).then(() => {
        this.$set(item, 'status', '3')
        uni.showToast({
          icon: 'none',
          title: '操作成功'
        })
        setTimeout(() => {
          this.changeIndex(4)
        }, 200)
      })
    },
    // 查看物流
    onExpress(item) {
      // console.log(item)
      if (item.item && item.item.length > 0 && item.item[0].logistics) {
        const id = item.item[0].logistics.id
        // console.log(id)
        uni.navigateTo({
          url: `/sub_service/order/express?id=${id}`
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  background: $background_color;
  padding-bottom: 100px;
  .nav {
    z-index: 99999;
    position: sticky;
    top: 0;
    background: white;
    .title {
      height: 44px;
      background: white;
      display: flex;
      align-items: center;
      .back {
        width: 44px;
        display: flex;
        justify-content: center;
      }
      .text {
        flex: 1;
        text-align: center;
        font-weight: 700;
        //margin-left: -44px;
      }
    }
    .tab {
      background: white;
      height: 35px;
      padding: 5px 10px;
      position: sticky;
      top: 0;
    }
  }
  .list {
    margin: 20rpx;
    min-height: 100px;
    //padding: 20rpx;
    //background: white;
    font-size: 24rpx;
    //border-radius: 10rpx;
    .item {
      background: white;
      padding: 20rpx;
      border-radius: 10rpx;
      margin-bottom: 10px;
      .time {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #f5f7f9;
        color: #ccc;
      }
      .product {
        display: flex;
        margin-top: 10px;
        .image {
          width: 160rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          .img {
            display: block;
          }
        }
        .desc {
          flex: 1;
          padding-left: 10px;
          display: flex;
          flex-direction: column;
          align-items: start;
          justify-content: center;
          .title, .sku, .price {
            height: 20px;
          }
          .title {
            font-weight: 700;
            font-size: 26rpx;
          }
          .sku {
            color: #999;
          }
          .price {
            text {
              font-weight: 500;
              //font-size: 26rpx;
            }
            .unit {
              font-size: 20rpx;
              margin-left: 10rpx;
            }
            .split {
              //background: red;
              //height: 20px;
              width: 10px;
              display: inline-block;
            }
          }
        }
      }
      .ops {
        height: 50px;
        //background: red;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .amount {
          width: 300rpx;
          text {
            font-weight: 700;
            font-size: 32rpx;
            color: red;
          }
          .unit {
            font-size: 20rpx;
            margin-left: 10rpx;
          }
        }
        .btn {
          flex: 1;
          display: flex;
          //background: red;
          justify-content: flex-end;
          //justify-content: space-between;
          .x {
            letter-spacing: 1px;
            margin-left: 5px;
          }
        }
      }
      .express {
        background: #f1f2f3;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #999;
        border-radius: 10rpx;
        font-size: 20rpx;
        letter-spacing: 1px;
      }
    }
  }
  .nothing {
    color: #ccc;
    line-height: 100px;
    background: white;
    text-align: center;
    min-height: 500px;
  }
}
</style>
